<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>$.htmlInput</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.htmlClean/jquery.htmlClean.js"></script>
    <script type="text/javascript" src="jquery.htmlInput.js"></script>

    <link href="Styles/Standard.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
        html,body{background-color:#fcf9f3;}
        form{padding:10px;}
        .html{border:solid 1px #ddd;}
        .toolbar{overflow:hidden;height:25px;border-bottom:solid 1px #ddd;
             background-color:#eee;background-image:url(Graphics/ToolbarBack.png);
             font-size:.85em}
        .tool{float:left;height:25px;
              border:solid 1px #ddd;
              border-top-color:#fff;border-left-color:#fff;
              padding:1px 2px;text-align:center;}
        .tool a
        {
        	float:left;overflow:visible;
        	height:24px;width:23px;
        	line-height:1.5em;
            color:#000;cursor:pointer;}
        .selected
        {
        	margin-right:-1px;margin-bottom:-1px;
        	padding-left:3px;padding-top:2px;
        	border-left:solid 1px #ddd;border-top:solid 1px #ddd;
            background-color:#eee;}
        .hover{background-color:#fff;}
    </style>

</head>
<body>
    <form>
        <p>
        <textarea id="Input" rows="15" cols="80" class="html"><H1 class="header"><P>Nested P Test</H1>
<P>This is <em>an inline</em> tag<BR>test</p>
<p>        Unnecessary white space test          </p>
<p><b>Replace</b> test</p>
<p><a href="http://www.antix.co.uk">link test</a></p>
<p>An image test <img src="http://www.antix.co.uk/graphics/a.png" /></p>
<ul>
<li>Un-closed List Item Test 1
<li>Un-closed List Item Test 2
<ul>
<li>Nested item</li>
</ul>
</ul>
</textarea>
        </p>
        <p>jQuery.htmlInput test</p>
    </form>    

    <script type="text/javascript">
        // defaults
        $.htmlInput.defaults.styleUrl = "Styles/Editor.css";
        $.htmlInput.defaults.debug = true;
        //$.htmlInput.defaults.tools.image.add = false;

        $.htmlInput.defaults.debug = true;

        var control;
        var $input, $moveButton;

        // moved in line to catch "body has no properties" bug
        //$(window).load(function() {
            // set up the html input
            $input = $("#Input");
            control = $.htmlInput($input[0]);

            // add a button to test moving the input
            $moveButton = $("<button>Move</button>");
            $moveButton.click(function() {
                // move the iframe
                $moveButton.before($(control.element));
                $moveButton.remove();
                //                Now done by DOMNodeInserted event                
                //                if ($.browser.mozilla || $.browser.safari) {
                //                    // reset contents for safari and mozilla
                //                    control.setContent($input.attr("value"));
                //                }

                return false;
            });
            $input.after($moveButton);
        //});
    </script>
</body>
</html>
